<template>
	<view class="big-box">
		<view @click="toDetail(item)" v-if="noticeList.length" class="item b-b" v-for="(item, index) in noticeList" :key="index">
			<view class="left column">
				<view class="tit clamp">{{ item.leaveWordContent }}</view>
				<view class="time">{{ item.createdTime | filterTimeFormat }}</view>
			</view>

			<text v-if="item.leaveWordState == 'waitReply'" class="price">等待回复</text>
		</view>

		<tui-no-data imgUrl="/static/images/toast/img_nodata.png" v-if="!loading && !noticeList.length">暂无消息</tui-no-data>
		<!-- 新增地址 -->
		<view class="tui-address-new"><tui-button shadow type="primary" height="88rpx" @click="navTo">我要留言</tui-button></view>
		<Loading v-if="loading"></Loading>
		<!-- <tui-fab @click="navTo" custom><view style="font-size: 23upx;">我要留言</view></tui-fab> -->
	</view>
</template>
<script>
import { userListPage } from '@/service/mine.js';
import datetimeHelper from '@/utils/time.js';
export default {
	data() {
		return {
			noticeList: [], // 提醒列表
			noticeListQuery: {
				pageNum: 1,
				pageSize: 10
			},
			loading: true
		};
	},
	onShow() {
		this.noticeListQuery = {
			pageNum: 1,
			pageSize: 10
		};
		this.loadMessages();
	},

	filters: {
		filterTimeFormat(value) {
			if (value) {
				return value.replace('T', ' ').substr(0, 19);
			}
		}
	},
	onPullDownRefresh() {
		this.noticeListQuery = {
			pageNum: 1,
			pageSize: 10
		};
		this.loadMessages();
	},
	onReachBottom() {
		this.loadMessages();
	},
	methods: {
		navTo() {
			uni.navigateTo({
				url: '/pages/mine/feedback/feedback'
			});
		},
		async loadMessages() {
			try {
				this.loading = true;
				const resp = await userListPage(this.noticeListQuery);
				this.noticeList = this.noticeListQuery.pageNum == 1 ? resp.data : [...this.noticeList, ...resp.data];
				this.noticeListQuery.pageNum++;
			} catch (e) {
				//TODO handle the exception
			} finally {
				this.loading = false;
			}
		},
		toDetail(item) {
			uni.navigateTo({
				url: 'detail?id=' + item.id
			});
		}
	}
};
</script>
<style lang="scss" scoped>
view {
	box-sizing: border-box;
}
.item {
	border-radius: 16upx;
	display: flex;
	width: 710upx;
	margin: 10rpx auto 20upx;
	padding: 30rpx 50rpx 30rpx 24rpx;
	background-color: #fff;

	&:after {
		left: 30rpx;
		border-color: #e8e8e8;
	}
	.mix-icon {
		flex-shrink: 0;
		width: 72rpx;
		font-size: 52rpx;
		transform: translateY(-6rpx);
	}
	.icon-tixian1 {
		color: #fd6663;
	}
	.icon-zhangdanmingxi01 {
		color: #ff893a;
	}
	.icon-chongzhi {
		color: #39c585;
	}
	.left {
		margin-left: 20upx;
		flex: 1;
		overflow: hidden;
	}
	.tit {
		display: -webkit-box;
		overflow: hidden;
		white-space: normal;
		text-overflow: ellipsis;
		word-wrap: break-word;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		font-size: 34rpx;
		color: $primary;
		line-height: 1.4;
		margin-bottom: 6rpx;
	}
	.time {
		font-size: 30rpx;
		color: #999;
	}
	.price {
		display: flex;
		align-items: flex-end;
		font-size: 30rpx;
		color: $primary;
		font-weight: 700;
	}
	&.income {
		.price {
			color: #00c700;
		}
		.icon-zhangdanmingxi01 {
			color: #39c585;
		}
	}
}
.big-box {
	padding-bottom: 50upx;
	width: 750upx;
	min-height: 100vh;
	flex-direction: column;
	background-color: #f7f9fc;

	.notice-itme {
		width: 750upx;
		justify-content: center;
		align-items: center;
		.item-status {
			width: 13upx;
			height: 13upx;
			border-radius: 13upx;
			background-color: #3291f9;
			margin-right: 10upx;
		}
		.item-box {
			flex-direction: column;
			align-items: center;
			width: 700upx;
			justify-content: center;
			.time {
				// line-height: 60upx;
				margin: 40upx 0;
				color: #a9b5c2;
				font-size: 24upx;
			}
			.item {
				flex-direction: column;
				width: 700upx;
				justify-content: flex-start;
				padding: 30upx 30upx 0upx 30upx;
				background-color: #ffffff;
				border-radius: 16upx;
				.title {
					color: #323437;
					font-size: 28upx;
				}
				.detail {
					text-overflow: ellipsis;
					lines: 1;
					font-size: 24upx;
					color: #66789c;
					margin: 20upx 0 30upx 0;
				}
				.register-detail {
					margin-top: 20upx;
					font-size: 24upx;
					color: #66789c;
				}
				.look-more {
					width: 660upx;
					height: 82upx;
					border-top: 1upx solid #f5f5f5;
					justify-content: center;
					align-items: center;
					text {
						font-size: 22upx;
						color: #3291f9;
					}
					.icon {
						font-size: 22upx;
						margin-left: 10upx;
						line-height: 30upx;
					}
				}
			}
		}
	}
}

.load-more {
	margin-top: 50upx;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	div {
		margin-top: 20upx;
		justify-content: center;
	}
}
.system-conetnt {
	width: 660upx;
	align-items: center;
	padding-bottom: 20upx;
}
.system-conetnt image {
	width: 70upx;
	height: 70upx;
}
.system-conetnt text {
	color: #66789c;
	font-size: 24upx;
	line-height: 29upx;
	display: block;
	width: 570upx;
	margin-left: 20upx;
}

.official-item {
	box-shadow: 0upx 6upx 18upx rgba(66, 95, 152, 0.14);
	border-radius: 8upx;
	box-sizing: border-box;
	width: 690upx;
	padding: 50upx 30upx 50upx 30upx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #ffffff;
	.off-left {
		// width: 70upx;
		margin-right: 10upx;
		height: 70upx;
		position: relative;
		justify-content: center;
		align-items: center;
		image {
			width: 70upx;
			height: 50upx;
		}
		text {
			text-align: center;
			// width: 18upx;
			// height: 18upx;
			font-size: 20upx;
			color: #fff;
			padding: 10upx;
			width: 81upx;
			border-radius: 18upx;
			background-color: $uni-color-primary;
			// position: absolute;
			// top: 0;
			// right: 2upx;
		}
	}
	.off-content {
		width: 480upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		.off-title {
			display: flex;
			width: 100%;
			font-size: 28upx;
			color: #323437;
			lines: 1;
			text-overflow: ellipsis;
			// margin-bottom: 30upx;
		}
		.off-desc {
			width: 100%;
			font-size: 24upx;
			color: #66789c;
			lines: 2;
			text-overflow: ellipsis;
		}
		.off-text {
			display: flex;
			width: 100%;
			line-height: 50upx;
			font-size: 32upx;
			lines: 2;
			text-overflow: ellipsis;
		}
		.off-distext {
			color: rgb(169, 182, 199);
		}
		.off-atext {
			color: rgb(50, 52, 55);
		}
	}

	.off-arrow {
		width: 11upx;
		height: 10upx;
		object-fit: contain;
	}
}

.tui-address-new {
	width: 100%;
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 999;
	padding: 20rpx 25rpx 30rpx;
	box-sizing: border-box;
	background: #fafafa;
}
.tui-btn-primary {
	background-color: $primary !important;
}
</style>
